<template>
    <div :style="{ height: height, width: width }" v-resize="onDivResize"></div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
//import resize from '../../dashboard/mixins/resize'

export default {
    //mixins: [resize],
    props: {
        // className: {
        //     type: String,
        //     default: 'chart'
        // },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        chartData: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            echartsData: [],
            chart: null
        };
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.renderChart(val)
            }
        }
    },
    mounted() {
        //this.chart = echarts.init(this.$el, 'macarons')
        //this.setOptions(this.chartData)
        //this.generateData();
        /* let c = {
             title:"收发包率",
             cdata:[
                 {name:"发包率",data:[["1999-6-1",666],["1999-7-1",444]]},
                 {name:"收包率",data:[["1999-6-1",111],["1999-7-1",333]]}
                 ]
         }z */
        //this.chartData = c
        this.initChart()
        /*   this.$nextTick(() => {
              this.initChart()
          }) */


    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons')
            this.renderChart(this.chartData)
        },
        getChart() {
            return this.chart
        },
        renderChart({ title, cdata, yName } = {}) {
            /**
             * {
             *  name:"tps"
             *  data:[]
             * }
             */
            if (title == null || title == "") title = "TPS"
            let legendData = []

            let series = []
            for (let index = 0; index < cdata.length; index++) {
                const element = cdata[index];
                legendData.push(element.name)
                let sc = {
                    name: element.name,
                    type: 'line',
                    showSymbol: true,
                    smooth: false,
                    data: element.data,
                    //large: true,
                }
                series.push(sc)
            }

            const option = {
                animation: false,
                title: {
                    text: title,
                    x: 'center'
                }, grid: {
                    left: 10,
                    right: 10,
                    bottom: 20,
                    top: 30,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    /*  formatter: (params) => {
                         return (                  
                             params[0].name +
                             ' : ' +
                             params[0].value[1]
                         );
                     }, */
                    axisPointer: {
                        animation: true
                    }
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false,
                    },
                   /*  interval: 5 * 1000,
                    minInterval: 5 * 1000,
                    maxInterval: 360 * 1000, */
                    //splitNumber: 20
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: true
                    },
                    name: yName
                },
                legend: {
                    data: legendData,
                    bottom: "1"
                },
                series: series

            };
            this.chart.setOption(option);
        },
        onDivResize() {
            if (this.chart == null) {
                return
            }
            this.chart.resize();
        }
    }
};
</script>

<style>
/* Add your custom styles here */
</style>